<template>
  <a-form
    :model="formState"
    name="login"
    @finish="onFinish"
  >
    <a-form-item
      name="userAccount"
      :rules="[{ required: true, message: '请输入账号!' }]"
    >
      <a-input v-model:value="formState.userAccount" placeholder="账号" />
    </a-form-item>

    <a-form-item
      name="userPassword"
      :rules="[{ required: true, message: '请输入密码!' }]"
    >
      <a-input-password v-model:value="formState.userPassword" placeholder="密码" />
    </a-form-item>

    <a-form-item>
      <a-button type="primary" html-type="submit" block>登录</a-button>
    </a-form-item>
  </a-form>
</template>

<script setup>
import { reactive } from 'vue'

const emit = defineEmits(['login'])

const formState = reactive({
  userAccount: '',
  userPassword: ''
})

const onFinish = () => {
  emit('login', {
    userAccount: formState.userAccount,
    userPassword: formState.userPassword
  })
}
</script>
